<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>考勤时间</title>
</head>
<body>

<style type="text/css">
	.index-body1{
		padding: 20px;
    	background-color: #f3f3f3;
    	padding-bottom: 30px;
    	margin: 0 auto;

	}
	.index-body2{
		width: 100%;
	    height: 100%;
	    background-color: #fff;
	}
	.index-body3{
		min-width: 1000px;
	     padding: 20px;
	    position: relative;
	}
	.title h1{
		padding: 0px;
    	margin: 0px 20px;
    	font-size: 20px;
    	color: #19AA8D;
    	font-weight: bold;
	}
	.title-left{
	    margin-right: 5px;
	    font-size: 12px;
	   	color: gray;
	}
	.title-left span{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	}
	.title-right{
		float: right;
	}
	.title-right div{
		float: left;
		margin-right: 20px;
	}
	.title-right div input{
		background-color: inherit;
		height: 22px;
	    padding: 0 4px;
	    font-size: 14px;
    	text-align: center;
	    border-radius: 2px;
	    border: 1px solid #eee;
	}
	.title-right-btn{
		padding: 2px 8px 1px 8px;
    	font-size: 12px;
    	border-radius: 3px;
    	color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7;
	}
	.datagrid-header-row td{
		background: #6666661a;
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	    text-align: center;
	}
	.datagrid-row td{
		background: #fff;
		font-size: 12px;
		text-align: center;
	}
	ul{
	list-style:none;
	margin: 0px;
	}
	.top-se>li,.date-search{
	float:left;
	padding-right: 5px;
    padding-left: 5px;
	}
	.top-se span{
		font-size: 12px;
		color: gray;
	}
	.top-se1>li,.date-search{
	float:left;
	padding-right: 5px;
    padding-left: 5px;
	}
	.top-se{
		margin-left: 40px;
	}
	.btn3{
		margin-right: 10px;
    	border-radius: 4px;
    	cursor: pointer;
    	background-color: #19AA8D!important;
    	color: #fff!important;
    	border-color: #13826b33!important;
    	border: 1px solid transparent;
	}
	.title-right-text{
		color:#666666e3;
		padding-left: 65px;
	    padding-right: 25px;
	    border-radius: 5px;
	    background-color: rgba(242,242,242,1);
	}
	.title-right-text input{
		width: 40px;
    	background-color: #fff;
    	display: inline-block;
	}
	.body-center h2{
		height: 32px;
	    line-height: 32px;
	    padding: 0 5px;
	    border-bottom: solid 1px #dbdfe5;
	    color: #19AA8D;
	    font-weight: 700;
	    font-size: 16px;
	    margin-bottom: 10px;
	    margin-top: 10px;
	}
	.guize input{
		width: 40px;
    	background-color: #fff;
    	display: inline-block;
    	background-color: inherit;
		height: 22px;
	    padding: 0 4px;
	    font-size: 14px;
    	text-align: center;
    	color: red;
	    border-radius: 2px;
	    border: 1px solid #eee;
	}
	.guize p{
		color: #666666;
    	font-size: 19px;
    	text-align: center;
	}
	.guize span{
		color:red;
		font-size:20px;
		margin: 5px 0px;
	}
	.modal{
		overflow-x: hidden;
    	overflow-y: auto;
    	opacity: 1;
    	position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1050;
	    outline: 0;
	    display: none;
	}
	.modal-dialog{
		transform: translate(0,0);
		width: 600px;
    	margin: 30px auto;
    	position: relative;
	}
	.modal-content{
		border: none;
    	border-radius: 4px;
    	box-shadow: 2px 2px 6px rgba(0,0,0,.349019607843137);
    	position: relative;
    	background-color: #fff;
    	background-clip: padding-box;
    	outline: 0;
    	font-size: 12px;
    	color: #999;
	}
	.modal-header{
		padding: 6px 15px;
		min-height: 16.42857143px;
		border-bottom: 1px solid #e5e5e5;
	}
	.modal-body{
		overflow-y: auto;
    	max-height: 401px;
    	padding: 8px 15px;
    	position: relative;
	}
	.modal-footer{
		padding: 5px 10px;
		text-align: right;
		height:30px;
    	border-top: 1px solid #e5e5e5;
	}
	.modal-footer button{
		padding: 2px 12px;
	    font-size: 12px;
	    border-radius: 3px;
	    border: 1px solid transparent;
	    margin-bottom: 0;
    	margin-left: 5px;
	}
	.btn-close{
		color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7!important;
	}
	.btn-yes{
		color: #fff!important;
    	background-color: #19AA8D!important;
    	border-color: #19AA8D!important;
	}
	.close{
		padding: 0px;
	    opacity: 1;
	    transition: all linear .2s;
	    margin-top: -2px;
	    border: 0;
	    float: right;
	    font-size: 21px;
	    background:#fff;
	    outline:none;
	    font-weight: 700;
	    line-height: 1;
	    color: #000;
	    text-shadow: 0 1px 0 #fff;
	}
	.modal-backdrop{
		position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1040;
	    background-color: #000;
	    opacity: .5;
	    display: none;
	}
	h3{
	    font-size: 14px;
	    font-weight: 700;
	    font-style: normal;
	    margin: 0;
    	line-height: 1.42857143
	}
	.modal-form-group{
		margin: 0;
		margin-bottom: 10px;
		height:30px;
    	line-height: 1.42857143;
	}
	.form-group-text1,.form-group-text2,.form-group-text3{
		padding-right: 5px;
    	padding-left: 0;
    	float: left;
    	text-align: center;
	}
	.modal-form-group span{
		font-size: 14px;
		font-weight: 400;
	}
	.modal-form-group input{
		border-color: #99999929!important;
	    color: #999999cf;
	    padding-left: 10px;
	}
	.form-group-text1{
		width: 58%;
	}
	.form-group-text2{
		width: 100%;
		line-height: 30px;
	}
	.form-group-text3{
		width: 28%;
	    margin-top: 10px;
	}
	#zhui{
		width:50px;
		height:20px;
		border-radius: 10px;
		position: relative;
	}
	.kai{
		background-color:#19AA8D!important;
		border-color:#19AA8D!important;
	}
	.guan{
		background-color:gainsboro;
		border-color:gainsboro;
	}
	#yuan{
		width:20px;
		height:20px;
		background-color:#ffffff;
		border-color:#ffffff;
		border-radius: 25px;
		position: absolute;
	}
	.one_kai{
		left:30px;
	}
	.one_guan{
		left:0px;
	}
	.tishi{
		height: 30px;
		margin-top: 10px;
	}
	.shuang{
		font-size: 15px;
		float: right;
		color:#1AB394;
		margin-right: 50px;
	}
	.shuang span{
		margin-right: 5px;
		font-size:12px;
		color: red;
	}
	
</style>
<script type="text/javascript">
$(function(){
	//初始化表格
	$('#table1').datagrid({
		url:'banci_list',
		columns:[[
       	 		{field:'b_id',hidden:true,align:'center'},
       	 		{field:'sortable',title:'#',width:28,align:'center'},
				{field:'b_qi',title:'是否启用',width:200,align:'center'},
				{field:'b_name',title:'班次名称',width:200,align:'center'},
				{field:'b_dao',title:'签到时间',width:150,align:'center'},
				{field:'b_tui',title:'签退时间',width:150,align:'center'},
        ]],
        toolbar:'#tb',
	    pagination:true,
	    pageNumber:1,
	    pageSize:5,
	    pageList:[5,10,15]
	});
	$("#table1").datagrid({
		  onDblClickRow: function(index, row){
				fuzhi(row['b_id'],row['b_name'],row['b_qi'],row['b_dao'],row['b_tui'],"修改班次");
		}
	});
	$(".close").click(function(){
		guanbi();
	});
	$(".btn-close").click(function(){
		guanbi();
	});
	$(".btn-yes").click(function(){
		var type=$(".modal-content").attr("name");
		tijiao(type);
	});
	$("#btn-add").click(function(){
		
		$("#yuan").removeClass("one_kai");
		$("#zhui").removeClass("kai");
		$("#zhui").addClass("guan");
		if($("#b_qi").val()!=0){
			$("#yuan").animate({ 
				left:'0px',
		  	}, 1 );
		}
		qingkong();
		kaiqi();
		$(".modal-content").attr("name",1);
	});
});
function tijiao(type){
	var name=$("#b_name").val();
	var dao=$("#b_dao").timespinner('getValue');
	var tui=$("#b_tui").timespinner('getValue');
	var one=$(".one").val();
	var tow=$(".tow").val();
	var bid=$("#b_id").val();
	if(name==""||dao==""||tui==""){
		cuowu("请填写完整");
	}else{
		var t11=dao.split(":");
        var t21=tui.split(":");
        var sj1 = parseInt(t11[0])*60+parseInt(t11[1]);
        var sj2 = parseInt(t21[0])*60+parseInt(t21[1]);
	    var hours=(sj2-sj1)/60
	    if(sj1<sj2){
	    	if(hours>=8){
		    	if(type==1){
		    		paichong(name,dao,tui,bid);
		    	}else{
		    		if(one!=dao+":00"||tow!=tui+":00"){
		    			cuowu("不能修改已存在班次的时间")
		    		}else{
		    			paichong(name,dao,tui,bid);
		    		}
		    	}
		    }else{
		    	cuowu("班次时间必须大于8小时");
		    }
	    }else{
	    	cuowu("签到时间必须大于签退时间");
	    }
	}
}
function guanbi(){
	$(".modal").hide();
	$(".modal-backdrop").hide();
}
function dianji1(){
	cuowu("无法禁用");
}
function paichong(name,dao,tui,bid){
	$.ajax({
	  		url:"add_panduan",
	  		type:"post",
	  		data:{"bName":name,"bDao":dao,"bTui":tui,"id":bid},
	  		success:function(result){
		  		if(result==""){
		  			$("#form").submit();
					$("#form").form("clear");
					guanbi();
					$("#content-admin").panel('open').panel('refresh','kq-attendance-rule');
				}else{
					cuowu(result);
				}
	  		}
	 });	
}
function dianji(){
	if($("#b_qi").val()==0){
		$("#zhui").removeClass("guan");
		$("#zhui").addClass("kai");
		$("#yuan").animate({ 
			left:'+30px',
	  	}, 100 );
		$("#b_qi").val("1");
	}else{
		$("#zhui").removeClass("kai");
		$("#zhui").addClass("guan");
		$("#yuan").animate({ 
			left:'0px',
	  	}, 100 );
		$("#b_qi").val("0")
	}
}
function kaiqi(){
	$("#yuan").attr("onclick","dianji()")
	if($("#b_qi").val()==0){
		$("#yuan").removeClass("one_kai");
		$("#zhui").removeClass("kai");
		$("#zhui").addClass("guan");
			$("#yuan").animate({ 
				left:'0px',
		  	}, 1 );
	}else{
		$("#yuan").removeClass("guan");
		$("#zhui").addClass("kai");
			$("#yuan").animate({ 
				left:'+30px',
		  	}, 1 );
	}
	if($("#b_qi").val()==1){
		$("#yuan").removeAttr("onclick");
		$("#yuan").attr("onclick","dianji1()")
	}
	$(".modal").show();
	$(".modal-backdrop").show();
}
function cuowu(text){
	var div=$("<div>");
	var img=$("<img>");
	var span=$("<span>");
	div.addClass("bug");
	img.attr("src","static/easyui/themes/icons/cuowu.png");
	span.addClass("cuowu-tishi");
	span.html(text);
	div.append(img);
	div.append(span);
	$(".cuowudiv").append(div);
	var timer=setTimeout(function () {
		div.slideUp("fast");
		div.remove();
	}, 2000);
}
function qingkong(){
	$("#b_name").val("");
	$("#b_id").val("");
	$("#b_qi").val("0");
	$("#b_dao").timespinner('setValue', '');
	$("#b_tui").timespinner('setValue', '');
}
function fuzhi(id,name,qi,dao,tui,title){
	$("#b_id").val(id);
	$(".title-ban").html(title);
	$("#b_name").val(name);
	$("#b_dao").timespinner('setValue', dao);
	$("#b_tui").timespinner('setValue', tui);
	$(".one").val(dao);
	$(".tow").val(tui);
	if(qi=="启用中"){
		$("#b_qi").val(1);
	}else{
		$("#b_qi").val(0);
	}
	kaiqi();
	$(".modal-content").attr("name",2);
}

</script>
<div class="index-body1">
	<div class="index-body2">
			<div class="index-body3">
				<div class="title">
				<h1>班次</h1>
					<div class="title-left"> 
						<div class="tishi">
						<button class="btn3" id="btn-add" class="easyui-linkbutton">新增班次</button>
						<div class="shuang">双击行即可修改<span>(班次时间无法修改哦)</span></div>
						</div>
					</div>
				<div class="body-table">
					<table id="table1" class="easyui-datagrid" data-options="width:1023,fitColumns:true,height:300">
					</table>
					<div class="body-center">
						<h2>考勤规则</h2>
						<div class="guize">
							<p>最早提前<span>1</span>小时签到</p>
							<p>迟到/早退<span>1</span>小时为旷工半天</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close">×</button>
				<h3 class="title-ban">新增班次</h3>
			</div>
			<div class="modal-body">
				<Form action="add_banci" method="post" id="form">
					<div class="modal-form-group">
						<div class="form-group-text1">
						<input type="hidden" id="b_id"  name="bid"/>
							<span>班次名：</span><input type="text" id="b_name" name="bname" placeholder="班次名" >
						</div>
					</div>
					<div class="modal-form-group">
						<div class="form-group-text2">
							<input class="one" type="hidden" >
							<input class="tow" type="hidden">
							<ul class="top-se">
							<li><span>签到时间：</span></li>
							<li id="app-bdao"><input  name="bdao" id="b_dao"  class="easyui-timespinner" style="width:150px"  ></li>
							<li><span>签退时间：</span></li>
							<li id="app-bdao"><input  name="btui" id="b_tui"  class="easyui-timespinner"  style="width:150px" ></li>
							</ul>
						</div>
					</div >
					<div class="modal-form-group">
						<div class="form-group-text3">
							<span>是否启用：</span>
						</div>
						<div class="form-group-text3">
							<div id="zhui">
							<div id="yuan" onclick=""><input type="hidden"  id="b_qi" name="bqi"  value="0"/></div>
							</div>
						</div>
					</div >
				</Form>
			</div>
			<div class="modal-footer">
				<button class="btn-close">关闭</button>
				<button class="btn-yes">确定</button>
			</div>
		</div>
	</div>
</div>
<div class="modal-backdrop"></div>
</body>
</html>